<!DOCTYPE html>

<head>
    <meta charset="UTF-8">
    <script src="https://unpkg.com/vue@3"></script>
    <title>第二次作业一</title>
</head>


<div id="app">
    请输入张三的成绩:
    <input type="number" v-model="grade" @click/>
    <h3>{{message}}</h3>
</div>

<script>
    const {createApp} = Vue

    createApp({
        data() {
            return {
                grade: 80,
                message: '未输入成绩',
                lists: [{message: 'Foo'}, {message: 'Bar'}]
            }
        },
        watch: {
            grade:{
                handler: function (newValue,oldValue){
                    console.log(this.message);
                    this.$nextTick(function () {
                        this.checkThis();
                    })
                },
                deep:true
            }
        },
        methods: {
            checkThis() {
                if (this.grade >= 95){
                    this.message = "张三的成绩优秀"
                }else if (this.grade >= 75){
                    this.message = "张三的成绩良好"
                }else if (this.grade >= 60){
                    this.message = "张三的成绩及格"
                }else {
                    this.message = "张三的成绩不及格"
                }
            }
        }

    }).mount('#app')
</script>